<!-- 编辑 editProuduct-->
<template>
  <div class="content">
    <div class="product-edit">
      <el-form :model="data" ref="editProductForm" label-width="100px" size="medium" :rules="rules">
        <el-row class="edit-form-item">
          <h3>基本信息</h3>
          <div class="form-content">
            <el-form-item label="商品名称：" prop="name">
              <el-input type="textarea" v-model="data.name" :placeholder="'请输入商品名称(不超过'+ nameMaxLength  +'字)'"
                        :maxlength="nameMaxLength" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="商品别名：" prop="detailTitle">
              <el-input type="textarea" v-model="data.detailTitle" :placeholder="'请输入商品别名(不超过' + nameMaxLength + '字)'"
                        :maxlength="nameMaxLength" show-word-limit></el-input>
              <span style="color:#c0c4cc"> &nbsp; 供应商使用(供货商商品名称)</span>
            </el-form-item>
            <el-form-item label="品牌名称：" prop="brandName">
              <BrandName returnIdName="idname" v-model="data.brandId" style="width:240px;" placeholder="请输入选择品牌名称"
                         @getBrandName="getBrandName"></BrandName>
            </el-form-item>
            <el-form-item label="商品分类：" prop="productCategoryIds">
              <el-cascader clearable v-model="data.productCategoryIds" :props="{ value: 'id', label: 'name' }" :options="classList"
                           placeholder="请选择商品分类"></el-cascader>
            </el-form-item>
            <el-form-item label="商品分组：" prop="groupIds">
              <el-select clearable v-model="data.groupIds" placeholder="请选择商品分组" multiple>
                <el-option v-for="item in groupList" :key="item.value" :label="item.label" :value="item.value"
                           :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="序号：" prop="sort">
              <el-input-number v-model="data.sort" controls-position="right" :min="0"></el-input-number>
              <span style="color:#c0c4cc"> &nbsp; 影响列表排序。若非特殊商品，建议设默认值0。</span>
            </el-form-item>
            <el-form-item label="商品封面：" prop="pic">
              <Upload :limit="1" :limitSize="{width: 340, height: 340}" v-model="data.pic" :fileLists="data.picList"></Upload>
              <span style="color:#c0c4cc">商品封面图片尺寸小于340x340像素</span>
            </el-form-item>
            <el-form-item label="商品轮播：" prop="albumPics">
              <Upload v-model="data.albumPics" :limitSize="{width: 750, height: 500}" :fileLists="data.albumPicsList"></Upload>
              <span style="color:#c0c4cc">商品轮播图片尺寸小于750x500像素</span>
            </el-form-item>
            <el-form-item label="商品描述：" prop="description">
              <el-input :rows="4" type="textarea" v-model="data.description" placeholder="请输入商品描述" maxlength="200"
                        show-word-limit>
              </el-input>
            </el-form-item>
            <el-form-item label="商品详情图：" prop="detailDesc">
              <Upload v-model="data.detailDesc" :limitSize="{width: 750}" :fileLists="data.detailDescList"></Upload>
              <span style="color:#c0c4cc">商品详情图片尺寸宽小于750像素高随意</span>
            </el-form-item>
          </div>
        </el-row>
        <el-row class="edit-form-item">
          <h3>商品规格与库存</h3>
          <div class="form-content">
            <el-form-item label="商品类型：">
              <el-button-group>
                <el-button @click="handleChangeProductType(1)" :type="data.productStyle === 1 ? 'primary' : ''">单规格</el-button>
                <el-button @click="handleChangeProductType(2)" :type="data.productStyle === 2 ? 'primary' : ''">多规格</el-button>
              </el-button-group>
            </el-form-item>
            <!-- 单规格 -->
            <el-row v-if="data.productStyle === 1">
              <el-col :span="12">
                <el-form-item label="商品价格：" prop="price">
                  <el-input v-model="data.price" placeholder="请输入商品价格"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="划线价：" prop="linePrice">
                  <el-input v-model="data.linePrice" placeholder="请输入划线价"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="库存：" prop="stock">
                  <el-input-number v-model="data.stock" placeholder="请输入库存" controls-position="right" :min="0"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品编码：" prop="productSn">
                  <el-input v-model="data.productSn"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="积分兑换：" prop="usePointLimit">
                  <el-input v-model="data.usePointLimit" placeholder="请输入积分兑换"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="限购次数：" prop="buyerLimit">
                  <el-input v-model="data.buyerLimit" placeholder="请输入限购次数"></el-input>
                  <span style="color:#c0c4cc"> &nbsp; 0不限购</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规格名：" prop="specificationsTypes">
                  <el-input v-model="data.specificationsTypes" placeholder="请输入规格名"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <!-- 单规格 -->

            <!-- 多规格 -->
            <el-row :span="24" v-if="data.productStyle === 2">
              <el-form-item label="暂未开放 "></el-form-item>
            </el-row>
            <!-- 多规格 -->

            <el-form-item label="减库存方式：" prop="delStockStyle">
              <el-radio-group v-model="data.delStockStyle">
                <el-radio :label="1">付款减库存</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="推荐商品：" prop="recommandStatus">
              <el-radio-group v-model="data.recommandStatus">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-row>
        <el-row class="edit-form-item">
          <h3>物流及服务</h3>
          <div class="form-content">
            <el-form-item label="快递运费：" prop="expressFreight">
              <el-radio-group v-model="data.expressFreight">
                <el-radio :label="1">包邮</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="服务承诺：" prop="serviceIdList">
              <el-checkbox-group v-model="data.serviceIdList">
                <el-checkbox :label="item.id" v-for="item in serviceList" :key="item.id">
                  {{item.name}}
                  <el-tooltip class="item" effect="dark" :content="item.descrition" placement="top">
                    <i class="el-icon-question" style="color:rgb(96, 98, 102)"></i>
                  </el-tooltip>

                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </el-row>
        <el-form-item label-width="0px">
          <Cbutton @click="handleSubmit('editProductForm', 1)" :btnloading="btnLoading" size="medium">保存并上架</Cbutton>
          <Cbutton type="" :btnloading="btnLoading" size="medium" @click="handleSubmit('editProductForm')">保存</Cbutton>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Upload from '@/components/Upload/edit'
import { GetProductInfo, GetProductGroupingList, GetProductClassifyList, GetServicePromiseList, EditProduct } from '@/api/onlineMan'
import { addProductFormRulse } from '@/utils/rules'
import BrandName from '@/components/Brand'
export default {
  name: 'editProuduct',
  components: { Upload, BrandName },
  data () {
    return {
      nameMaxLength: 100,
      btnLoading: false,
      data: {
        id: '',
        brandName: '',
        brandId: '',
        // 基本信息
        name: '',
        detailTitle: '',
        sort: 0,
        productCategoryId: '', // 商品分类
        productCategoryIds: '', // 商品分类
        groupIds: [],
        pic: '', // 商品封面
        albumPics: '', // 轮播
        description: '', // 商品描述
        detailDesc: '', // 商品详情图

        // 商品规格与库存
        productStyle: '1', // 商品类型： 1->单规格 2->多规格 ,
        delStockStyle: '1', // 减库存方式: 1->付款减库存 ,
        recommandStatus: 0, // 推荐商品: 1->推荐 0->不推荐 ,

        // 商品类型： 1->单规格 start
        price: '', // 商品价格
        linePrice: '', // 划线价格
        stock: '', // 库存
        usePointLimit: '0', // 积分兑换
        productSn: '', // 商品编码
        buyerLimit: '0', // 限购次数
        specificationsTypes: '',
        // 商品类型： 1->单规格 end

        // 物流及服务
        expressFreight: '1', //  快递运费: 1-> 包邮 ,
        serviceIdList: [] // 服务承诺IDS
      },
      rules: addProductFormRulse,
      classList: [],
      groupList: [],
      serviceList: []
    }
  },
  props: {},
  watch: {},
  computed: {},
  created () {
    this.data.id = this.$route.query.id
    this.init()
  },
  mounted () { },
  methods: {
    init () {
      // 拉取商品数据
      this.getProductInfo()
      // 拉取分类数据
      this.getClass()
      // 拉取分组数据
      this.getGroup()
      // 拉取服务承诺数据
      this.getService()
    },
    handleBack () {
      this.$router.go(-1)
    },
    getBrandName (val) {
      this.data.brandName = val
    },
    handleChangeProductType (val) {
      this.data.productStyle = val
    },
    handleSubmit (formName, type) {
      this.$refs[formName].validate(valid => {
        if (!valid) return false
        // 保存上架

        const params = JSON.parse(JSON.stringify(this.data))
        params.productCategoryId = params.productCategoryIds[params.productCategoryIds.length - 1]
        if (type) {
          params.publishStatus = '1'
        } else {
          params.publishStatus = '0'
        }
        this.btnLoading = true
        EditProduct(params).then(res => {
          this.btnLoading = false
          this.$message.success(res.message || '修改成功')
          this.$router.push({ name: 'pms:goods:list' })
        }).catch(() => {
          this.btnLoading = false
        })
      })
    },
    getProductInfo () {
      GetProductInfo(this.data.id).then(res => {
        const data = res.data
        for (const key in data) {
          if (this.data.hasOwnProperty(key) && data[key]) {
            this.data[key] = data[key]
          }
          if (this.data.hasOwnProperty(key) && data[key] === 0) {
            this.data[key] = data[key]
          }
        }
        if (this.data.pic && this.data.pic !== '') {
          this.data.picList = this.data.pic.split(',')
        }
        if (this.data.albumPics && this.data.albumPics !== '') {
          this.data.albumPicsList = this.data.albumPics.split(',')
        }
        if (this.data.detailDesc && this.data.detailDesc !== '') {
          this.data.detailDescList = this.data.detailDesc.split(',')
        }
        this.data.productCategoryIds = data.productCategoryIdList
        this.data.brandId = data.brandId.toString()
      }).catch(() => { })
    },
    getClass () {
      const params = {
        pageNum: 1,
        pageSize: 30
      }
      GetProductClassifyList(params).then(res => {
        res.data.map(item => {
          if (item.children && item.children.length === 0) {
            delete item.children
          }
          if (item.children && item.children.length >= 1) {
            item.children.map(items => {
              if (items.children && items.children.length === 0) {
                delete items.children
              }
            })
          }
        })
        this.classList = res.data
      }).catch(() => { })
    },
    getGroup () {
      const params = {
        pageNum: 1,
        pageSize: 30
      }
      GetProductGroupingList(params).then(res => {
        res.data.list.map(item => {
          this.groupList.push({
            value: item.id,
            label: item.groupName
          })
        })
      }).catch(() => { })
    },
    getService () {
      const params = {
        relationType: 2,
        type: 22,
        pageNum: 1,
        pageSize: 30
      }
      GetServicePromiseList(params).then(res => {
        this.serviceList = res.data.list
      }).catch(() => { })
    }

  }
}

</script>
<style lang='scss' scoped>
$editProuductBorder: 1px solid rgb(232, 232, 232);
.product-edit {
  max-width: 1000px;
  overflow: hidden;
  margin: 10px 0 0 50px;
  .edit-form-item {
    border: $editProuductBorder;
    border-radius: 3px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  .form-content {
    padding: 22px 20px 0;
  }
  h3 {
    font-size: 24px;
    font-weight: bold;
    padding: 10px;
    height: 36px;
    line-height: 36px;
    border-bottom: $editProuductBorder;
  }
  .el-date-editor.el-input,
  .el-select,
  .el-input,
  .el-input-number,
  .el-cascader {
    width: 240px;
  }
  .el-textarea {
    width: 400px;
  }
}
</style>
